<!--资源选择窗-->

<template>
  <Modal
      v-model="visible"
      title="资源库文件选择"
      width="1024"
      :mask-closable="false">

    <div style="margin-bottom: 30px;">
      <Button class="m-r-5px float-right" type="primary" icon="md-cloud-upload" @click="openUploadResourceModal">上传资源</Button>
      <Select class="m-r-5px" v-model="currentSelectGroupId" style="width: 250px;" clearable @on-change="loadResourceList">
        <Option v-for="item in resourceGroupList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="text" @click="loadResourceList">
          <Icon type="md-refresh" size="18"/>
        </Button>
      </Tooltip>

      <div class="clearfix"></div>
      <div class="m-b-10px"></div>

      <Row :gutter="15">
        <i-col v-for="resource in resourceList" :key="resource.id" :span="4">
          <div class="resource-card" :class="{'active': currentSelectResourceId == resource.id}"
               @click="currentSelectResourceId = resource.id; currentSelectResource = resource">
            <div class="img-wrap">
              <img v-if="resource.relative_path" class="resource-thumbnail" style="cursor: pointer;"
                   :src="$PnUtil.buildImageSrc(resource.relative_path)"/>
            </div>
            <div class="footer">
              <p class="float-left" :title="resource.original_file_name">
                {{ $PnUtil.cutString(resource.original_file_name, 15) }}
              </p>
              <div class="clearfix"></div>
            </div>
          </div>
        </i-col>
      </Row>
      <div class="none-alert" v-if="resourceList.length == 0">
        <Icon type="ios-alert-outline" size="150"/>
        <p>找不到相关资源数据</p>
      </div>

      <Page size="small" class="float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
            show-elevator show-total @on-change="loadResourceList">
      </Page>
    </div>

    <div slot="footer">
      <Button class="m-r-5px" @click="visible = false">关闭</Button>
      <Button type="primary" @click="affirmSelect" :disabled="!currentSelectResourceId">确认</Button>
    </div>

    <UploadResourceModal ref="uploadResourceModal" @completeUpload="loadResourceList"></UploadResourceModal>
  </Modal>
</template>

<script>
import UploadResourceModal from "@/views/components/admin/resource/UploadResourceModal";
export default {
  name: "SelectMyResourceModal",
  components: {
    UploadResourceModal
  },
  data() {
    return {
      visible: false,
      pageIndex: 1,
      pageSize: 18,
      pageTotal: 0,

      currentSelectGroupId: '',
      currentSelectResourceId: '',
      currentSelectResource: {},
      resourceGroupList: [],
      resourceList: []
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.visible = true
      this.currentSelectGroupId = ''
      this.currentSelectResourceId = ''
      this.currentSelectResource = {}
      this.loadResourceGroupList()
      this.loadResourceList()
    },

    loadResourceGroupList() {
      this.$PnApi.ResourceApi.getMyAllPnResourceGroup().then(result => {
        this.resourceGroupList = result.data.payload
      })
    },

    loadResourceList() {
      this.$PnApi.ResourceApi.getMyPnResourceByPage(this.pageIndex, this.pageSize, this.currentSelectGroupId).then(result => {
        this.resourceList = result.data.payload.list
        this.pageTotal = result.data.payload.total
      })
    },

    openUploadResourceModal() {
      this.$refs.uploadResourceModal.init()
    },

    affirmSelect() {
      this.visible = false
      this.$emit('affirmSelect', this.currentSelectResource)
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.resource-card {
  width: 100%;
  border: 2px solid #424242;
  border-radius: 8px;
  background-color: #424242;
  position: relative;
  margin-bottom: 15px;

  &:hover, &.active {
    border-color: #2196f3;
    box-shadow: 2px 1px 20px #212121;
  }

  &:hover .footer .operation-wrap {
    display: block;
  }

  .img-wrap {
    width: 100%;
    height: 120px;
    background-color: #212121;
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px;
    text-align: center;

    .resource-thumbnail {
      max-width: 100%;
      height: 100%;
    }
  }

  .footer {
    width: 100%;
    background-color: #424242;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 6px;
    position: relative;

    p {
      font-size: 13px;
    }
  }
}
</style>
